{% load i18n %}
{% load l10n %}
{% load eventurl %}
{% load money %}
{% load thumb %}
{% load eventsignal %}
{% load rich_text %}
{% for tup in products_by_category %}
    <section aria-labelledby="category-{% if tup.0 %}{{ tup.0.id }}{% else %}none{% endif %}"{% if tup.0.description %} aria-describedby="category-info-{{ tup.0.id }}"{% endif %}>
        {% if tup.0 %}
            <h3 id="category-{{ tup.0.id }}">{{ tup.0.name }}</h3>
            {% if tup.0.description %}
                <div id="category-info-{{ tup.0.id }}">{{ tup.0.description|localize|rich_text }}</div>
            {% endif %}
        {% else %}
            <h3 id="category-none" class="sr-only">{% trans "Uncategorized products" %}</h3>
        {% endif %}
        {% for product in tup.1 %}
            {% if product.has_variations %}
                <article>
                <details class="item-with-variations" {% if event.settings.show_variations_expanded %}open{% endif %}
                        id="item-{{ product.id }}">
                    <summary class="row-fluid product-row headline">
                        <div class="col-md-8 col-xs-12">
                            {% if product.picture %}
                                <a href="{{ product.picture.url }}" class="productpicture"
                                   data-title="{{ product.name|force_escape|force_escape }}"
                                        {# Yes, double-escape to prevent XSS in lightbox #}
                                   data-lightbox="{{ product.id }}"
                                   aria-label="{% blocktrans trimmed with product=product.name %}Show full-size image of {{ product }}{% endblocktrans %}">
                                    <img src="{{ product.picture|thumb:'60x60^' }}"
                                         alt="{{ product.name }}"/>
                                </a>
                            {% endif %}
                            <div class="product-description {% if product.picture %}with-picture{% endif %}">
                                <h4>
                                    <a data-toggle="variations">
                                        {{ product.name }}
                                    </a>
                                </h4>
                                {% if product.description %}
                                    <div class="product-description">
                                        {{ product.description|localize|rich_text }}
                                    </div>
                                {% endif %}
                                {% if product.min_per_order and product.min_per_order > 1 %}
                                    <p>
                                        <small>
                                            {% blocktrans trimmed with num=product.min_per_order %}
                                                minimum amount to order: {{ num }}
                                            {% endblocktrans %}
                                        </small>
                                    </p>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-2 col-xs-6 price">
                            {% if product.free_price %}
                                {% blocktrans trimmed with price=product.min_price|money:event.currency %}
                                    from {{ price }}
                                {% endblocktrans %}
                            {% elif product.min_price != product.max_price %}
                                {{ product.min_price|money:event.currency  }} – {{ product.max_price|money:event.currency  }}
                            {% elif not product.min_price and not product.max_price %}
                                {% trans "FREE" context "price" %}
                            {% else %}
                                {{ product.min_price|money:event.currency }}
                            {% endif %}
                        </div>
                        <div class="col-md-2 col-xs-6 availability-box">
                            {% if not event.settings.show_variations_expanded %}
                                <a data-toggle="variations" class="js-only">
                                    {% trans "Show variants" %}
                                </a>
                            {% endif %}
                        </div>
                        <div class="clearfix"></div>
                    </summary>
                    <div class="variations {% if not event.settings.show_variations_expanded %}variations-collapsed{% endif %}">
                        {% for var in product.available_variations %}
                            <article class="row-fluid product-row variation">
                                <div class="col-md-8 col-xs-12">
                                    <h5>
                                        <label for="variation_{{ product.pk }}_{{ var.pk }}">
                                            {{ var }}
                                        </label>
                                    </h5>
                                    {% if var.description %}
                                        <div class="variation-description">
                                            {{ var.description|localize|rich_text }}
                                        </div>
                                    {% endif %}
                                    {% if product.do_show_quota_left %}
                                        {% include "pretixpresale/event/fragment_quota_left.html" with avail=var.cached_availability %}
                                    {% endif %}
                                </div>
                                <div class="col-md-2 col-xs-6 price">
                                    {% if var.original_price %}
                                        {% if event.settings.display_net_prices %}
                                            <del>{{ var.original_price.net|money:event.currency }}</del>
                                        {% else %}
                                            <del>{{ var.original_price.gross|money:event.currency }}</del>
                                        {% endif %}
                                        <ins>
                                    {% endif %}
                                    {% if product.free_price %}
                                        <label class="sr-only" for="price-variation-{{ product.pk }}-{{ var.pk }}">{% blocktrans trimmed with product=var.value %}Modify price for {{ product }}{% endblocktrans %}</label>
                                        <div class="input-group input-group-price">
                                            <span class="input-group-addon">{{ event.currency }}</span>
                                            <input type="number" class="form-control input-item-price"
                                                   id="price-variation-{{ product.pk }}-{{ var.pk }}"
                                                   {% if not ev.presale_is_running %}disabled{% endif %}
                                                   placeholder="0"
                                                   min="{% if event.settings.display_net_prices %}{{ var.display_price.net|money_numberfield:event.currency }}{% else %}{{ var.display_price.gross|money_numberfield:event.currency }}{% endif %}"
                                                   name="price_{{ product.id }}_{{ var.id }}"
                                                   title="{% blocktrans trimmed with product=var.value %}Modify price for {{ product }}{% endblocktrans %}"
                                                   step="any"
                                                   value="{% if event.settings.display_net_prices %}{{ var.display_price.net|money_numberfield:event.currency }}{% else %}{{ var.display_price.gross|money_numberfield:event.currency }}{% endif %}"
                                            >
                                        </div>
                                    {% elif not var.display_price.gross %}
                                        {% trans "FREE" context "price" %}
                                        {% elif event.settings.display_net_prices %}
                                        {{ var.display_price.net|money:event.currency }}
                                    {% else %}
                                        {{ var.display_price.gross|money:event.currency }}
                                    {% endif %}
                                    {% if product.original_price or var.original_price %}
                                        </ins>
                                    {% endif %}
                                    {% if product.includes_mixed_tax_rate %}
                                        {% if event.settings.display_net_prices %}
                                            <small>{% trans "plus taxes" %}</small>
                                        {% else %}
                                            <small>{% trans "incl. taxes" %}</small>
                                        {% endif %}
                                    {% elif var.display_price.rate and var.display_price.gross and event.settings.display_net_prices %}
                                        <small>{% blocktrans trimmed with rate=var.display_price.rate|floatformat:-2 name=var.display_price.name %}
                                            <strong>plus</strong> {{ rate }}% {{ name }}
                                        {% endblocktrans %}</small>
                                    {% elif var.display_price.rate and var.display_price.gross %}
                                        <small>{% blocktrans trimmed with rate=var.display_price.rate|floatformat:-2 name=var.display_price.name %}
                                            incl. {{ rate }}% {{ name }}
                                        {% endblocktrans %}</small>
                                    {% endif %}
                                </div>
                                {% if product.require_voucher %}
                                    <div class="col-md-2 col-xs-6 availability-box unavailable">
                                        <small>
                                            <a href="#voucher">{% trans "Enter a voucher code below to buy this ticket." %}</a>
                                        </small>
                                    </div>
                                    {% elif var.cached_availability.0 == 100 %}
                                    <div class="col-md-2 col-xs-6 availability-box available">
										{% if var.order_max == 1 %}
                                            <label class="item-checkbox-label">
                                                <input type="checkbox" value="1"
                                                       {% if not ev.presale_is_running %}disabled{% endif %}
                                                       id="variation_{{ product.id }}_{{ var.id }}"
                                                       name="variation_{{ product.id }}_{{ var.id }}"
                                                       title="{% blocktrans with product=product.name var=var.name %}Amount of {{ product }} – {{ var }} to order{% endblocktrans %}">
                                            </label>
                                        {% else %}
                                            <input type="number" class="form-control input-item-count" placeholder="0" min="0"
                                                   {% if not ev.presale_is_running %}disabled{% endif %}
                                                   max="{{ var.order_max }}"
                                                   pattern="\d*"
                                                   id="variation_{{ product.id }}_{{ var.id }}"
                                                   name="variation_{{ product.id }}_{{ var.id }}">
                                        {% endif %}
                                    </div>
                                {% else %}
                                    {% include "pretixpresale/event/fragment_availability.html" with price=var.display_price.gross avail=var.cached_availability.0 event=event product=product var=var %}
                                {% endif %}
                                <div class="clearfix"></div>
                            </article>
                        {% endfor %}
                    </div>
                </details>
                </article>
            {% else %}
                <article class="row-fluid product-row simple" id="item-{{ product.id }}">
                    <div class="col-md-8 col-xs-12">
                        {% if product.picture %}
                            <a href="{{ product.picture.url }}" class="productpicture"
                               data-title="{{ product.name|force_escape|force_escape }}"
                                    {# Yes, double-escape to prevent XSS in lightbox #}
                               data-lightbox="{{ product.id }}"
                               aria-label="{% blocktrans trimmed with product=product.name %}Show full-size image of {{ product }}{% endblocktrans %}">
                                <img src="{{ product.picture|thumb:'60x60^' }}"
                                     alt="{{ product.name }}"/>
                            </a>
                        {% endif %}
                        <div class="product-description {% if product.picture %}with-picture{% endif %}">
                            <h4>
                                <label for="item_{{ product.pk }}">{{ product.name }}</label>
                            </h4>
                            {% if product.description %}
                                <div class="product-description">
                                    {{ product.description|localize|rich_text }}
                                </div>
                            {% endif %}
                            {% if product.do_show_quota_left %}
                                {% include "pretixpresale/event/fragment_quota_left.html" with avail=product.cached_availability %}
                            {% endif %}
                            {% if product.min_per_order and product.min_per_order > 1 %}
                                <p>
                                    <small>
                                        {% blocktrans trimmed with num=product.min_per_order %}
                                            minimum amount to order: {{ num }}
                                        {% endblocktrans %}
                                    </small>
                                </p>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-2 col-xs-6 price">
                        {% if product.original_price %}
                            {% if event.settings.display_net_prices %}
                                <del>{{ product.original_price.net|money:event.currency }}</del>
                            {% else %}
                                <del>{{ product.original_price.gross|money:event.currency }}</del>
                            {% endif %}
                            <ins>
                        {% endif %}
                        {% if product.free_price %}
                            <div class="input-group input-group-price">
                                <label class="sr-only" for="price-item-{{ product.pk }}">{% blocktrans trimmed with product=product.name %}Modify price for {{ product }}{% endblocktrans %}</label>
                                <span class="input-group-addon">{{ event.currency }}</span>
                                <input type="number" class="form-control input-item-price" placeholder="0"
                                       id="price-item-{{ product.pk }}"
                                       {% if not ev.presale_is_running %}disabled{% endif %}
                                       min="{% if event.settings.display_net_prices %}{{ product.display_price.net|money_numberfield:event.currency }}{% else %}{{ product.display_price.gross|money_numberfield:event.currency }}{% endif %}"
                                       name="price_{{ product.id }}"
                                       title="{% blocktrans trimmed with product=product.name %}Modify price for {{ product }}{% endblocktrans %}"
                                       value="{% if event.settings.display_net_prices %}{{ product.display_price.net|money_numberfield:event.currency }}{% else %}{{ product.display_price.gross|money_numberfield:event.currency }}{% endif %}"
                                       step="any">
                            </div>
                        {% elif not product.display_price.gross %}
                            {% trans "FREE" context "price" %}
                            {% elif event.settings.display_net_prices %}
                            {{ product.display_price.net|money:event.currency }}
                        {% else %}
                            {{ product.display_price.gross|money:event.currency }}
                        {% endif %}
                        {% if product.original_price %}
                            </ins>
                        {% endif %}
                        {% if product.includes_mixed_tax_rate %}
                            {% if event.settings.display_net_prices %}
                                <small>{% trans "plus taxes" %}</small>
                            {% else %}
                                <small>{% trans "incl. taxes" %}</small>
                            {% endif %}
                        {% elif product.display_price.rate and product.display_price.gross and event.settings.display_net_prices %}
                            <small>{% blocktrans trimmed with rate=product.display_price.rate|floatformat:-2 name=product.display_price.name %}
                                <strong>plus</strong> {{ rate }}% {{ name }}
                            {% endblocktrans %}</small>
                        {% elif product.display_price.rate and product.display_price.gross %}
                            <small>{% blocktrans trimmed with rate=product.display_price.rate|floatformat:-2 name=product.display_price.name %}
                                incl. {{ rate }}% {{ name }}
                            {% endblocktrans %}</small>
                        {% endif %}
                    </div>
                    {% if product.require_voucher %}
                        <div class="col-md-2 col-xs-6 availability-box unavailable">
                            <small>
                                {% trans "Enter a voucher code below to buy this ticket." %}
                            </small>
                        </div>
                    {% elif product.cached_availability.0 == 100 %}
                        <div class="col-md-2 col-xs-6 availability-box available">
							{% if product.order_max == 1 %}
                                <label class="item-checkbox-label">
                                    <input type="checkbox" value="1" {% if productnum == 1 %}checked{% endif %}
                                           {% if not ev.presale_is_running %}disabled{% endif %}
                                           name="item_{{ product.id }}" id="item_{{ product.id }}">
                                </label>
                            {% else %}
                                <input type="number" class="form-control input-item-count" placeholder="0" min="0"
                                       {% if not ev.presale_is_running %}disabled{% endif %}
                                       pattern="\d*" {% if productnum == 1 %}value="1"{% endif %}
                                       max="{{ product.order_max }}"
                                       name="item_{{ product.id }}"
                                       id="item_{{ product.id }}"
                                       title="{% blocktrans with product=product.name %}Amount of {{ product }} to order{% endblocktrans %}">
                            {% endif %}
                        </div>
                    {% else %}
                        {% include "pretixpresale/event/fragment_availability.html" with price=product.display_price.gross avail=product.cached_availability.0 event=event product=product var=0 %}
                    {% endif %}
                    <div class="clearfix"></div>
                </article>
            {% endif %}
        {% endfor %}
    </section>
{% endfor %}
